{% load humanize %}
{% load firecares_tags %}
{% load widget_tweaks %}
{% load favit_tags %}
<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="{{ object.description }} Administer users for {{ object.name }}.">
    <meta name="author" content="Prominent Edge LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Update user associations for fire department: {{ object.name }}</title>
    {% include 'firestation/_favicon.html' %}
    {% include "firestation/_firecares_style.html" %}


    <script type="text/javascript">
    var config = {
      geom: {{ object.geom.json|safe|default:"null" }},
      centroid: [{{ object.headquarters_address.geom.centroid.y }}, {{ object.headquarters_address.geom.centroid.x }}],
      headquarters: {{ object.headquarters_address.geom.json|safe|default:"null" }},
      headquartersName: "{{ object.name }} Headquarters",
      id: {{ object.id }}
    };

    var users = [
      {% for u in user_perms %}
      {
        id: {{ u.user.id }},
        username: "{{ u.user.username }}",
        email: "{{ u.user.email }}",
        can_change: {{ u.can_change|yesno:"true,false" }},
        can_admin: {{ u.can_admin|yesno:"true,false" }}
      }{% if not forloop.last %},{% endif %}
      {% endfor %}
    ];

    var invites = [
      {% for i in invites %}
      {
        id: {{ i.id }},
        accepted: {{ i.accepted|yesno:"true,false" }},
        email: "{{ i.email }}",
        inviter: "{{ i.inviter.username }}",
        sent: "{{ i.sent|naturaltime }}",
        username: "{{ i.departmentinvitation.user.username }}"
      }{% if not forloop.last %},{% endif %}
      {% endfor %}
    ];

    var departmentWhitelists = {{ whitelists|jsonify }};
    </script>
    {% include 'google_analytics.html' %}
</head>

<body class="ct-headroom--fixedTopBar cssAnimate" ng-controller="jurisdictionController" ng-app="fireStation">

{% include 'firestation/_mobile_navbar.html' %}
{% include 'firestation/_mobile_search.html' %}

<div id="ct-js-wrapper" class="ct-pageWrapper">

<div class="ct-navbarMobile">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand logo" href="{% url 'firestation_home' %}"><h1>FireCARES</h1></a>
    <button type="button" class="searchForm-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-search"></i></span>
    </button>
</div>

{% include "firestation/_navbar.html" %}

<div class="ct-site--map">
    <div class="container">
        <a href="{% url 'firestation_home' %}">Home</a>
        <a href="{% url 'firedepartment_list' %}">Departments</a>
        <a href="{% url 'firedepartment_detail_slug' object.id object.slug %}">{{ object.name }}</a>
        <a href="{% url 'admin_department_users' object.id %}">Manage department users</a>
    </div>
</div>
<header class="ct-mediaSection">
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="ct-u-displayTableVertical">
                <div class="ct-textBox ct-u-text--white ct-u-displayTableCell text-left">
                    <h2>{{ object.name }}</h2>
                    <h4>{{ object.headquarters_address.get_row_display }}</h4>
                    <span class="ct-productID ct-fw-300">
                        FDID: <span>{{ object.fdid }}</span>
                    </span>
                </div>
                <div class="ct-u-displayTableCell text-right">
                    {% include 'firestation/_department_header.html' %}
                </div>
            </div>
        </div>
    </div>
</header>
<section class="ct-u-paddingBottom60">
    <div class="container">
        <div class="ct-section--products">
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <div class="ct-heading ct-u-marginBottom20 ct-u-marginTop30">
                        <h3>{{ object.name }}</h3>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="ct-u-displayTableVertical ct-productDetails">
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Department Type</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.department_type }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">NFPA Region</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.region }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">FDID</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.fdid }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">State</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.state }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Phone</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.headquarters_phone|phonenumber|default:"Unknown" }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Fax</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.headquarters_fax|phonenumber|default:"Unknown" }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Protected population</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        {% if object.population %}
                                        <span>{{ object.population|intcomma }}</span>
                                        {% else %}
                                        <span>Unknown</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Community size</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.geom_area|floatformat:"2"|intcomma}} <span>mi&sup2;</span></span>
                                    </div>
                                </div>
                                {% if object.twitter_handle %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Twitter</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span><a href="https://twitter.com/{{ object.twitter_handle }}" target="_blank">@{{object.twitter_handle}} <i class="fa fa-external-link ct-fw-600"></i></a></span>
                                    </div>
                                </div>
                                {% endif %}
                                {% if object.website %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600"><a href="{{ object.website }}">Official Website <i class="fa fa-external-link ct-fw-600"></i></a></span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div id="map"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-lg-12 ct-u-marginTop10">
                            <div class="ct-u-displayTableVertical">
                                <div class="ct-u-displayTableCell text-left">
                                    <i class="fa fa-clock-o pull-left"></i><h6>Last Updated: {{ object.modified }}</h6>
                                </div>
                                <div class="ct-u-displayTableCell text-right">
                                    <a href="" ng-click="toggleFullScreenMap()"><i class="fa fa-arrows-alt"></i> View Fullscreen Map</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="ct-u-marginBottom30">
                        <h3>Manage {{ object }} Users</h3>
                    </div>
                    <h5 class="ct-u-marginBottom10">Invite a user to FireCARES
                        <i data-toggle="tooltip" data-placement="top" title="To invite a person to FireCARES, enter their email address and click 'Invite to FireCARES'.  After accepting the invite, the user's permissions for this department and associated fire stations can be specified in the 'Manage User Access' section." class="fa fa-info-circle" aria-hidden="true"></i>
                    </h5>
                    <div class="invitations" ng-controller="userInviteController">
                        <form id="invite-form" class="form-inline row">
                            {% csrf_token %}
                            {% verbatim %}
                            <div class="col-md-6 form-group">
                                <input type="text" name="email" id="id_email" ng-model="toInvite" class="form-control validate-email" placeholder="Email address"/>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary pull-left" ng-click="invite(toInvite)" ng-disabled="!toInvite">Invite to FireCARES</button>
                            </div>
                            <div class="col-md-4">
                                <div class="ng-cloak fade alert" ng-class="{in: error || success, 'alert-danger': error, 'alert-success': success}">{{ error || success || '&nbsp;'}}</div>
                            </div>
                            {% endverbatim %}
                        </form>
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="collapsed">View invitations for {{ object }}</a>
                                    </h4>
                                </div>
                                <div id="collapse1" class="panel-collapse collapse">
                                    <ul class="list-group list-unstyled">
                                        {% verbatim %}
                                        <li ng-repeat="i in invitations" class="ng-cloak list-group-item">
                                            <a href=""
                                                class="btn btn-default btn-xs"
                                                title="Cancel this invitation"
                                                ng-click="cancelInvitation(i)"
                                                ng-show="!i.accepted"
                                                >
                                                <i class="fa fa-minus-circle delete-invitation"></i>
                                            </a>
                                            <span class="pull-right label label-success" ng-if="i.accepted">Invite accepted, username is &quot;{{ i.username }}&quot;</span>
                                            <strong>{{ i.email }}</strong> - sent {{ i.sent }} by {{ i.inviter }}
                                        </li>
                                        {% endverbatim %}
                                        <li class="ng-cloak list-group-item" ng-if="!invitations.length">
                                            No invitations have been sent for {{ object }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <h4 class="ct-u-marginBottom20">
                        Manage whitelisted email addresses
                        <i data-toggle="tooltip" data-placement="top" title="Whitelisted email addresses allow for department administrators to allow users with specific email address or from a specific email domain to create an account in FireCARES or login to FireCARES via the IMIS or Helix single-sign-on solutions when using a matching email address. Individual permissions on this department can be assigned for users that login or register using the given email address or email domain." class="fa fa-info-circle" aria-hidden="true"></i>
                    </h4>
                    <form role="form" method="post" action="" ng-controller="whitelistAdminController" class="well whitelist-admin">
                        {% csrf_token %}
                        <input type="hidden" name="form" value="whitelist"/>
                        <table class="table table-striped well">
                            <thead>
                                <tr>
                                    <th>Email or domain</th>
                                    <th>Include any emails from this domain?</th>
                                    <th>Give ability to change department data?</th>
                                    <th>Give ability to admin department users?</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% verbatim %}
                                <tr ng-repeat="wl in departmentWhitelists" class="ng-cloak">
                                    <td>
                                        <strong>{{ wl.email_or_domain }}</strong>
                                        <input type="hidden" name="email_or_domain" value="{{ wl.email_or_domain }}"/>
                                        <input type="hidden" name="id" value="{{ wl.id }}"/>
                                    </td>
                                    <td>
                                        <input disabled type="checkbox" name="is_domain_whitelist" ng-model="wl.is_domain_whitelist"/>
                                        <input type="hidden" name="is_domain_whitelist" value="{{ wl.is_domain_whitelist}}"/>
                                    </td>
                                    <td>
                                        <input disabled type="checkbox" name="give_curator" ng-model="wl.give_curator"/>
                                        <input type="hidden" name="give_curator" value="{{ wl.give_curator}}"/>
                                    </td>
                                    <td>
                                        <input disabled type="checkbox" name="give_admin" ng-model="wl.give_admin"/>
                                        <input type="hidden" name="give_admin" value="{{ wl.give_admin}}"/>
                                    </td>
                                    <td>
                                        <a href="" ng-click="deleteItem(wl)" title="Remove this whitelist entry completely" class="btn btn-default btn-xs pull-right delete-whitelist">
                                            <i class="fa fa-minus-circle"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr ng-show="toAdd" class="ng-cloak">
                                    <td>
                                        <input type="text" autocomplete="off" name="add_email_or_domain" ng-model="toAdd.email_or_domain" placeholder="Email or domain to whitelist" />
                                    </td>
                                    <td>
                                        <input type="checkbox" name="new_is_domain_whitelist" ng-model="toAdd.is_domain_whitelist"/>
                                    </td>
                                    <td>
                                        <input type="checkbox" name="new_give_curator" ng-model="toAdd.give_curator"/>
                                    </td>
                                    <td>
                                        <input type="checkbox" name="new_give_admin" ng-model="toAdd.give_admin"/>
                                    </td>
                                    <td>
                                        <button type="button" ng-click="cancelAdd()" class="btn btn-default pull-right">Cancel</button>
                                        <button type="button" ng-click="addComplete()" ng-disabled="!toAdd.email_or_domain || alreadyExists(toAdd)" class="btn btn-primary pull-right">Add</button>
                                        <span class="label label-danger pull-right" ng-if="alreadyExists(toAdd)">Item already exists</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <button type="button" ng-disabled="toAdd !== null" ng-click="addWhitelist()" class="btn btn-primary btn-xs">
                                            <i class="fa fa-plus"></i>
                                            Add whitelisted email/domain
                                        </button>
                                    </td>
                                </tr>
                                {% endverbatim %}
                            </tbody>
                        </table>
                        <div class="submission">
                            <button ng-disabled="toAdd !== null" class="btn btn-primary ct-u-marginTop10" type="submit">Save</button>
                        </div>
                    </form>
                    <hr style='clear: both;'/>
                    <h4 class="ct-u-marginBottom20">
                        Manage user permissions for existing FireCARES users
                        <i data-toggle="tooltip" data-placement="top" title="This section allows department administrators to assign specific permissions for existing FireCARES users on this department." class="fa fa-info-circle" aria-hidden="true"></i>
                    </h4>
                    <form role="form" method="post" action="" ng-controller="userAdminController" class="well user-admin">
                        {% csrf_token %}
                        <input type="hidden" name="form" value="users"/>
                        <table class="table table-striped well">
                            <thead>
                                <tr>
                                    <th>User email</th>
                                    <th>Can change this department's data?</th>
                                    <th>Can administer this department's associated users?</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% verbatim %}
                                <tr ng-repeat="u in users" class="ng-cloak">
                                    <td><strong>{{ u.email }}</strong></td>
                                    <td><input type="checkbox" name="can_change" value="{{ u.email }}" ng-model="u.can_change"/></td>
                                    <td><input type="checkbox" name="can_admin" value="{{ u.email }}" ng-model="u.can_admin"/></td>
                                    <td><a href="" ng-click="deletePerms(u)" title="Remove this user's permissions for this department completely" class="btn btn-default btn-xs pull-right delete-perms"><i class="fa fa-minus-circle"></i></a></td>
                                </tr>
                                <tr ng-show="toadd" class="ng-cloak">
                                    <td><input type="text" autocomplete="off" name="email" ng-model="toadd.email" placeholder="Type an existing user email    " uib-typeahead="suggestion for suggestion in autocompleteUsers($viewValue)"/></td>
                                    <td><input type="checkbox" name="can_change" ng-model="toadd.can_change"/></td>
                                    <td><input type="checkbox" name="can_admin" ng-model="toadd.can_admin"/></td>
                                    <td>
                                        <button type="button" ng-click="cancelAdd()" class="btn btn-default pull-right">Cancel</button>
                                        <button type="button" ng-click="addComplete()" ng-disabled="(!toadd.can_change && !toadd.can_admin) || !toadd.email" class="btn btn-primary pull-right">Add</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <button type="button" ng-disabled="toadd !== null" ng-click="addUser()" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> Add User</button>
                                    </td>
                                </tr>
                                {% endverbatim %}
                            </tbody>
                        </table>
                        <div class="submission">
                            <button ng-disabled="toadd !== null" class="btn btn-primary ct-u-marginTop10" type="submit">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% include 'firestation/_footer.html' %}
</div>
{% include "firestation/_firecares_scripts.html" %}
<script type="text/javascript">
$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
